<template>
  <div class="box">
    <!-- 顶部 -->
    <van-nav-bar title="评分详情"
                 @click-left="$router.back(-1)">
      <template #left>
        <img class="icon_right"
             src="@/assets/img/down_left.png"
             alt="" />
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="title">
        <span class="i"></span>
        <span>基线得分</span>
        <span style="float: right; margin: 10px 10px 0 0">10</span>
      </div>
      <div class="item">
        <van-row>
          <van-col span="21">
            <div class="subject">性别：{{ score.gender }}</div>
          </van-col>
          <van-col span="3">
            <div class="num">{{score.gender === '女' ? '+1': '+0'}}</div>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="21">
            <div class="subject">年龄：{{ score.age }}</div>
          </van-col>
          <van-col span="3">
            <div class="num">{{ score.age > 60 ? '+0' : '+1' }}</div>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="21">
            <div class="subject">
              化疗前一天睡眠不佳：<span :class="{'red': score.sleep !== 1}">{{ score.sleep === 1 ? '是' : '否' }}</span>
            </div>
          </van-col>
          <van-col span="3">
            <div class="num">{{ score.sleep === 1 ? '+1' : '+0' }}</div>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="21">
            <div class="subject">
              有焦虑症状史：<span :class="{'red': score.anxiety !== 1}">{{ score.anxiety === 1 ? '是' : '否' }}</span>
            </div>
          </van-col>
          <van-col span="3">
            <div class="num">{{ score.anxiety === 1 ? '+1' : '+0' }}</div>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="21">
            <div class="subject">
              有晕车晕船史：<span :class="{'red': score.carsick !== 1}">{{ score.carsick === 1 ? '是' : '否' }}</span>
            </div>
          </van-col>
          <van-col span="3">
            <div class="num">{{ score.carsick === 1 ? '+1' : '+0' }}</div>
          </van-col>
        </van-row>
      </div>
      <!-- 新增 -->
      <div class="item">
        <van-row>
          <van-col span="21">
            <div class="subject">
              有妊娠呕吐史：<span :class="{'red': score.pregnancy !== 1}">{{ score.pregnancy === 1 ? '是' : '否' }}</span>
            </div>
          </van-col>
          <van-col span="3">
            <div class="num">{{ score.pregnancy === 1 ? '+1' : '+0' }}</div>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="21">
            <div class="subject">
              饮酒史：<span :class="{'red': score.drink !== 1}">{{ score.drink === 1 ? '是' : '否' }}</span>
              <div class="info">
                (规律性摄入含酒精饮品或近2周内单次摄入酒精饮品)
              </div>
            </div>
          </van-col>
          <van-col span="3">
            <div class="num">{{ score.drink === 1 ? '+0' : '+1' }}</div>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="21">
            <div class="subject">
              对恶心呕吐、食欲不佳的预期：<span :class="{'red': score.vomit !== 1}">{{ score.vomit === 1 ? '是' : '否' }}</span>
              <div class="info">
                (对即将接受的治疗，因既往呕吐经历、外界环境信息等
                心理因素，导致未用治疗时就出现恶心呕吐、食欲不佳
                的反应或心理预测)
              </div>
            </div>
          </van-col>
          <van-col span="3">
            <div class="num">{{ score.vomit === 1 ? '+1' : '+0' }}</div>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="21">
            <div class="subject">
              接受铂类或蒽环类化疗：<span :class="{'red': score.chemotherapy !== 1}">{{ score.chemotherapy === 1 ? '是' : '否' }}</span>
            </div>
          </van-col>
          <van-col span="3">
            <div class="num">{{ score.chemotherapy === 1 ? '+2' : '+0' }}</div>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="21">
            <div class="subject">
              同时使用其他致吐药物：<span :class="{'red': score.other_vomit !== 1}" style="color: ##ed4c4d">{{ score.other_vomit === 1 ? '是' : '否' }}</span>
              <div class="info">
                (如阿片类止痛药、5-羟色胺再摄取抑制剂。羟考酮、
                吗啡、曲马多、氟西汀、舍曲林、艾司西酞普兰等)
              </div>
            </div>
          </van-col>
          <van-col span="3">
            <div class="num">{{ score.other_vomit === 1 ? '+3' : '+0' }}</div>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="21">
            <div class="subject">
              在之前抗肿瘤治疗周期中发生过恶心呕吐：<span :class="{'red': score.poor !== 1}" style="color: ##ed4c4d">{{ score.poor === 1 ? '是' : '否' }}</span>
              <div class="info">(含食欲不佳)</div>
            </div>
          </van-col>
          <van-col span="3">
            <div class="num">{{ score.poor === 1 ? '+5' : '+0' }}</div>
          </van-col>
        </van-row>
      </div>
      <div class="item"
           style="border-bottom: 1px solid #f5f5f5">
        <van-row>
          <van-col span="21">
            <div class="subject">化疗周期：{{ score.cycle }}</div>
          </van-col>
          <van-col span="3">
            <div class="num">{{score.cycle >= 3 ? '-6' : '-5'}}</div>
          </van-col>
        </van-row>
      </div>
      <div class="title">
        <span class="i"></span>
        <span>抗肿瘤治疗药物名单</span>
      </div>
      <div class="name">
        <div class="tit">静脉注射抗肿瘤药物</div>
        <span v-for="(item, index) in score.intravenous.split(',')"
              :key="index">{{ item }}</span>
        <!-- <span>卡莫斯汀≥250mg/m2</span> -->
      </div>
      <div class="name">
        <div class="tit">口服抗肿瘤药物</div>
        <span v-for="(item, index) in score.antitumor.split(',')"
              :key="index">{{ item }}</span>
        <!-- <span>白消安(≥4mg/d)</span> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      score: {
        intravenous: '',
        antitumor: ''
      }
    }
  },
  // computed: {
  //   // 得分计算
  //   sum () {
  //     const _o = {
  //       base: 10,
  //       gender: this.score.gender === '女' ? 1 : 0,
  //       age: this.score.age > 60 ? 0 : 1,
  //       sleep: this.score.sleep === 1 ? 1 : 0,
  //       anxiety: this.score.anxiety === 1 ? 1 : 0,
  //       carsick: this.score.carsick === 1 ? 1 : 0,
  //       drink: 0,
  //       vomit: this.score.vomit === 1 ? 1 : 0,
  //       chemotherapy: this.score.chemotherapy === 1 ? 2 : 0,
  //       other_vomit: this.score.other_vomit === 1 ? 3 : 0,
  //       poor: this.score.poor === 1 ? 5 : 0,
  //       cycle: this.score.cycle >= 3 ? -6 : -5
  //     }
  //     let sum = 0
  //     for (const key in _o) {
  //       sum += _o[key]
  //     }
  //     return sum
  //   }
  // },
  mounted () {
    this.score = this.$route.query.data || {}
  },
  methods: {}
}
</script>
<style scoped lang='less'>
.red {
  color: #ed4c4d;
}
.title {
  width: 100%;
  height: 30px;
  .i {
    display: inline-block;
    margin-right: 5px;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    opacity: 1;
  }
  span {
    display: inline-block;
    height: 22px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: #4182ff;
    opacity: 1;
  }
}
.icon_right {
  width: 12px;
  height: 21px;
  vertical-align: middle;
}
.box {
  width: 100%;
  overflow: hidden;
  // 内容
  .content {
    margin-top: 42px;
    margin-bottom: 20px;
    width: 100%;
    background-color: #fff;
    padding-left: 16px;
    box-sizing: border-box;
    .item {
      width: 100%;
      .subject {
        padding: 10px 5px;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #161616;
      }
      .info {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 22px;
        color: #161616;
      }
      .num {
        padding: 10px;
        text-align: right;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 20px;
        color: #4182ff;
      }
    }
    .name {
      width: 100%;
      .tit {
        height: 20px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 22px;
        color: #161616;
        margin-top: 10px;
      }
      span {
        display: inline-block;
        padding: 5px 20px 5px 0;
        box-sizing: border-box;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 20px;
        color: #161616;
      }
    }
  }
}
</style>
